<template>
  <div>
    <h3>差异报告详情</h3>
    <el-card>
      <div>
        <div class="border-bottom mar-top-12">
          <div class="title border-line f-size-16">报告办理信息</div>
          <div class="content">
            <div class="item">
              <p class="title">办理机构名称</p>
              <span>{{ baseInfo.handOrg }}</span>
            </div>
            <div class="item">
              <p class="title">办理状态</p>
              <span>{{ '已办结' }}</span>
            </div>
            <div class="item">
              <p class="title">办理时间</p>
              <span>{{ baseInfo.startTime }}</span>
            </div>
            <div class="item">
              <p class="title">办理意见</p>
              <span>-</span>
            </div>
          </div>
        </div>
        <div class="border-bottom mar-top-12">
          <div class="title border-line">报告基本信息</div>
          <div class="content">
            <div class="item">
              <p class="title">报告机构名称</p>
              <span>{{ baseInfo.orgName }}</span>
            </div>
            <div class="item">
              <p class="title">报告机构编码</p>
              <span>{{ baseInfo.orgCode }}</span>
            </div>
            <div class="item">
              <p class="title">报告编码</p>
              <span>{{ baseInfo.diffCode }}</span>
            </div>
            <div class="item">
              <p class="title">报告时间</p>
              <span>2025-09-09 12:12:12</span>
            </div>
            <div class="item">
              <p class="title">关联核验记录流水号</p>
              <span>{{ 'CHECK2024120600000008' }}</span>
            </div>
            <div class="item">
              <p class="title">关联查询流水号</p>
              <span>{{ 'QUERY2024120600000097' }}</span>
            </div>
            <div class="item">
              <p class="title">机构联系电话</p>
              <span>-</span>
            </div>
            <div class="item">
              <p class="title">报告简述</p>
              <span>-</span>
            </div>
          </div>
        </div>
        <div class="border-bottom mar-top-12">
          <div class="title border-line">备案主体基本信息</div>
          <div class="content">
            <div class="item">
              <p class="title">统一社会信用代码</p>
              <span>{{ baseInfo.companyCode }}</span>
            </div>
            <div class="item">
              <p class="title">备案主体名称</p>
              <span>{{ baseInfo.bodyName }}</span>
            </div>
            <div class="item">
              <p class="title">备案主题类型</p>
              <span>-</span>
            </div>
          </div>
        </div>
        <div class="mar-top-12">
          <div class="title border-line">受益所有人及所有权信息</div>
          <div class="flex-start mar-top-12 row border-bottom f-size-14">
            <div class="flex-col box" style="width: 120px">
              <span class="th border-bottom">姓名</span>
              <span class="th border-bottom">性别</span>
              <span class="th border-bottom">国籍</span>
            </div>
            <div class="flex-col box">
              <div class="flex-start border-bottom text-box">
                <el-button type="success" plain size="mini" @click="edit">{{ peopleInfo.edit ? '保存' : '修改' }}</el-button>
                <el-input size="small" v-model="peopleInfo.name" placeholder="" :disabled="!peopleInfo.edit" class="input"></el-input>
                <el-radio :disabled="!peopleInfo.edit" v-model="peopleInfo.namepass" label="1">通过</el-radio>
                <el-radio :disabled="!peopleInfo.edit" v-model="peopleInfo.namepass" label="2">不通过</el-radio>
              </div>
              <div class="flex-start border-bottom text-box" style="padding-left: 66px">
                <el-input size="small" v-model="peopleInfo.sex" placeholder="" :disabled="!peopleInfo.edit" class="input"></el-input>
                <el-radio :disabled="!peopleInfo.edit" v-model="peopleInfo.sexpass" label="1">通过</el-radio>
                <el-radio :disabled="!peopleInfo.edit" v-model="peopleInfo.sexpass" label="2">不通过</el-radio>
              </div>
              <div class="flex-start border-bottom text-box" style="padding-left: 66px">
                <el-input
                  size="small"
                  v-model="peopleInfo.nationality"
                  placeholder=""
                  :disabled="!peopleInfo.edit"
                  class="input"
                ></el-input>
                <el-radio :disabled="!peopleInfo.edit" v-model="peopleInfo.natpass" label="1">通过</el-radio>
                <el-radio :disabled="!peopleInfo.edit" v-model="peopleInfo.natpass" label="2">不通过</el-radio>
              </div>
            </div>
            <div class="flex-col box">
              <div class="flex-start border-bottom text-box">
                <el-button type="primary" plain size="mini">新增</el-button>
                <el-input size="small" v-model="peopleInfo1.name" placeholder="" :disabled="true" class="input"></el-input>
                <el-radio disabled v-model="peopleInfo1.namepass" label="1">通过</el-radio>
                <el-radio disabled v-model="peopleInfo1.namepass" label="2">不通过</el-radio>
              </div>
              <div class="flex-start border-bottom text-box" style="padding-left: 66px">
                <el-input size="small" v-model="peopleInfo1.sex" placeholder="" :disabled="true" class="input"></el-input>
                <el-radio disabled v-model="peopleInfo1.sexpass" label="1">通过</el-radio>
                <el-radio disabled v-model="peopleInfo1.sexpass" label="2">不通过</el-radio>
              </div>
              <div class="flex-start border-bottom text-box" style="padding-left: 66px">
                <el-input size="small" v-model="peopleInfo1.nationality" placeholder="" :disabled="true" class="input"></el-input>
                <el-radio disabled v-model="peopleInfo1.natpass" label="1">通过</el-radio>
                <el-radio disabled v-model="peopleInfo1.natpass" label="2">不通过</el-radio>
              </div>
            </div>
          </div>
        </div>
        <div class="mar-top-12">
          <div class="title border-line f-size-16">证明材料</div>
          <div class="mar-top-12 flex-start f-size-14">
            <i class="el-icon-picture" />材料一.png
            <!-- <i class="el-icon-download" /> -->
          </div>
        </div>
        <div class="mar-top-12">
          <div class="title border-line f-size-16">分析报告</div>
          <div class="mar-top-12 flex-start f-size-14">
            <i class="el-icon-picture" />{{ baseInfo.diffCode }}差异分析报告.png
            <!-- <i class="el-icon-download" /> -->
          </div>
        </div>
        <div class="mar-top-12">
          <div class="title border-line f-size-16">案例分析报告</div>
          <div class="mar-top-12 flex-start f-size-14">
            <i class="el-icon-document" />{{ baseInfo.caseCode }}案例分析报告.pdf
            <!-- <i class="el-icon-download" /> -->
          </div>
        </div>
      </div>
    </el-card>
    <div class="text-right mar-top-12">
      <el-button size="small" type="primary" @click="exportInfo">导 出</el-button>
      <el-button size="small" @click="goBack">返 回</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DiffReportDetail',

  data() {
    return {
      peopleInfo: {
        name: '李华',
        sex: '女',
        nationality: '中国',
        edit: false,
        namepass: '1',
        sexpass: '',
        natpass: '1',
      },
      peopleInfo1: {
        name: '李玉',
        sex: '男',
        nationality: '中国香港',
        edit: false,
        namepass: '1',
        sexpass: '',
        natpass: '',
      },
      radio: '',
      baseInfo: {},
    }
  },
  created() {
    if (sessionStorage.getItem('diffInfo')) {
      this.baseInfo = JSON.parse(sessionStorage.getItem('diffInfo'))
    } else {
      this.baseInfo = {
        caseCode: 'CA202508080001',
        diffCode: 'QB202508080001',
        companyCode: '914301003388567',
        bodyName: '世瑞科技股份有限公司',
        orgCode: '914301003388567',
        orgName: '华南科技股份有限公司',
        status: '审批通过',
        startTime: '2025-08-18 15:35:35',
        handOrg: '华南科技股份有限公司',
        endTime: '2025-08-18 15:35:35',
      }
    }
  },
  mounted() {},

  methods: {
    exportInfo() {},
    goBack() {
      this.$router.go(-1)
    },
    edit() {
      this.peopleInfo.edit = !this.peopleInfo.edit
    },
    change(val, type, filed) {
      console.log(val, type)
      if (val) {
        if (type == '1') {
          this.peopleInfonopas = false
        }
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.content {
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  color: #666;
  padding-bottom: 12px;
  .item {
    width: 33%;
    p {
      margin-bottom: 6px;
    }
  }
}
::v-deep .input {
  margin-right: 10px;
  margin-left: 10px;
}
.flex-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.flex-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.box {
  background-color: #fff;
  .th {
    padding: 8px 10px;
    width: 100%;
    border-right: 1px solid #ccc;
  }
  .text-box {
    padding: 0 10px;
    line-height: 30px;
    border-right: 1px solid #ccc;
  }
}
::v-deep .el-radio__label {
  font-size: 12px;
}
</style>